<template>
	<view class="goods-details">
		<navbar title="商品详情" :background="{ background: `rgba(256,256,256,${percent})` }" :titleColor="`rgba(0,0,0,${percent})`" :immersive="true"></navbar>
		<!-- #ifdef H5 -->
		<!-- <download-nav v-if="showDownload" :top="44"></download-nav> -->
		<!-- #endif -->
		<!-- <loading-view v-if="isFirstLoading"></loading-view> -->

		<view class="contain" v-if="isNull">
			<!-- <bubble-tips top="180rpx"></bubble-tips> -->
			<!-- <product-swiper :imgUrls="swiperList" :video="goodsDetail.video"></product-swiper> -->
			<product-swiper :imgUrls="swiperList"></product-swiper>

			<!-- 抢购倒计时 -->
			<view class="time">
				<view class="purchase">
					<view>
						<view class="timeClass">
							<h2>{{ goodsDetail.goodName }}</h2>
							<view class="flex align-center" style="color: #777777; font-size: 25rpx">
								<view class="rxsp-image" v-if="goodsDetail.goodType == 1">
									<image src="/static/main/rxsp.png"></image>
								</view>
								<view class="jtsp-image" v-if="goodsDetail.goodType == 2">
									<image src="/static/main/jtsp.png"></image>
								</view>
							</view>
						</view>
					</view>
					<view class="purchase-left">
						<view class="left-bottom">
							<u-rate :value="goodsDetail.goodStars" disabled></u-rate>
						</view>
						<view class="left-pi">
							<!-- 最新价格 -->
							<text>
								<span>￥</span>
								{{ goodsDetail.todayPrice }}
							</text>
						</view>
					</view>
				</view>
			</view>

			<view>
				<view class="items">
					<view v-for="(item, index) in ['商品介绍', '商品图', '出售方信息']">
						<view @click="sort(index)" style="display: flex; flex-direction: column; align-items: center">
							<text :class="[sortIndex == index ? 'avater' : 'item']">{{ item }}</text>
							<view :class="[sortIndex == index ? 'border-bottom' : '']"></view>
						</view>
					</view>
				</view>
				<view class="images-item">
					<rich-text :nodes="detailsList"></rich-text>
				</view>
			</view>

			<view class="footer row bg-white fixed">
				<view class="add-cart br60 white mr20 ml10 md" @tap="showSpecFun(2)">购买</view>
			</view>
		</view>

		<view v-else>
			<view class="details-null column-center">
				<image class="img-null" src="/static/images/goods_null.png"></image>
				<view class="xs muted">该商品已下架或不存在，去逛逛别的吧~</view>
			</view>
		</view>

		<!-- 弹窗组件 -->
		<template v-if="showPopup">
			<u-popup v-model="showPopup" mode="bottom" border-radius="25" length="386rpx" :safe-area-inset-bottom="true" :mask-close-able="false">
				<!-- 弹窗内容 -->
				<view class="popup-content">
					<!-- 商品信息区域 -->
					<view class="product-info">
						<!-- 左侧商品图片 -->
						<view class="product-image">
							<image :src="path + goodsDetail.goodImg.split(',')[0]" mode="aspectFill"></image>
						</view>

						<!-- 右侧商品详情 -->
						<view class="product-details">
							<view class="product-title">{{ goodsDetail.goodName }}</view>
							<view v-if="showPopup" class="product-stock">可购买数量: {{ goodsDetail.todayGoodCount - goodsDetail.todaySellGoodCount }}</view>

							<view v-if="showPopup" class="quantity-btn">
								<!-- 数量选择器 -->
								<view class="quantity-selector">
									<view class="minus-btn" @click="decreaseQuantity">-</view>
									<input type="number" v-model="quantity" disabled />
									<view class="plus-btn" @click="increaseQuantity">+</view>
								</view>

								<!-- 一键购买按钮 -->
								<!-- <view class="buy-all-btn" @click="btnBuy()">一键全部</view> -->
							</view>
						</view>
					</view>

					<!-- 底部结算栏 -->
					<view class="bottom-bar">
						<view class="left-pi">
							<text>
								<span>￥</span>
								{{ goodsDetail.todayPrice * quantity }}
							</text>
						</view>
						<view class="action-buttons">
							<button class="cancel-btn" @click="show">取消</button>
							<button class="confirm-btn" @click="buyNow" :disabled="!showPopup">{{ '确认下单' }}</button>
						</view>
					</view>
				</view>
			</u-popup>
		</template>

		<u-back-top :scroll-top="scrollTop" :top="1000" :customStyle="{ backgroundColor: '#FFF', color: '#000', boxShadow: '0px 3px 6px rgba(0, 0, 0, 0.1)' }"></u-back-top>
	</view>
</template>

<script>
import { mapActions, mapGetters } from 'vuex';
import sort from '@/api/sort.js';
import api from '@/api/index.js';
import main from '@/api/main';
import { getBotTime, getCountTime, setSellTime } from '@/utils/utils.js';
export default {
	data() {
		return {
			showPopup: false, //购买
			quantity: 1, //购买数量
			percent: 0,
			sortIndex: 0,
			scrollTop: 0,
			countTime: 0,
			isFirstLoading: false,
			isNull: false,
			showSpec: false,
			swiperList: [],
			goodsDetail: {},
			goodsType: 0,
			id: '',
			showDownload: true,
			datePriceList: [],
			shoppingCardList: [],
			detailsList: {},
			path: api.getPath()
		};
	},
	async onLoad(options) {
		if (options.id) {
			await this.getApClass(options.id);
		}
	},
	onShow() {},
	methods: {
		//一键购买
		btnBuy() {
			const userRemainRewardPoints = uni.getStorageSync('user').remainRewardPoints;
			const userCount = Math.floor(Number(userRemainRewardPoints) / Number(this.goodsDetail.todayPrice));
			const count = Number(this.goodsDetail.todayGoodCount) - Number(this.goodsDetail.todaySellGoodCount);
			this.quantity = userCount > count ? count : userCount;
		},
		increaseQuantity() {
			if (this.quantity < this.goodsDetail.todayGoodCount - this.goodsDetail.todaySellGoodCount) {
				this.quantity++;
			}
		},
		decreaseQuantity() {
			if (this.quantity > 1) {
				this.quantity--;
			}
		},
		buyNow() {
			this.show();
			const goodId = this.goodsDetail.id; //商品id
			const totalNum = this.quantity; //购买数量
			uni.navigateTo({
				url: `/pages/goods_details/goods_order?goodId=${goodId}&totalNum=${totalNum}`
			});
		},
		onPageScroll(e) {
			this.percent = Math.min(e.scrollTop / 100, 1);
		},
		sort(row) {
			this.detailsList = [];
			this.sortIndex = row;
			if (row == 0) {
				const processedHTML = this.goodsDetail.goodDetail.replace(/<img /g, '<img style="max-width:100%;height:auto;" ');
				this.detailsList = processedHTML;
			} else if (row == 1) {
				const markerImgHTML = this.goodsDetail.markerImg.replace(/<img /g, '<img style="max-width:100%;height:auto;" ');
				this.detailsList = markerImgHTML;
			} else if (row == 2) {
				const sellerInfoHTML = this.goodsDetail.sellerInfo.replace(/<img /g, '<img style="max-width:100%;height:auto;" ');
				this.detailsList = sellerInfoHTML;
			}
		},
		showSpecFun(type) {
			const user = uni.getStorageSync('user');
			if (!user.fullName && !user.idCardNumber) {
				uni.showToast({
					title: '个人信息不完整，请前往完善个人信息',
					icon: 'none',
					duration: 2500 // 适当延长显示时间
				});
				setTimeout(() => {
					uni.navigateTo({
						url: '/bundle/pages/user_set/user_set'
					});
				}, 2500);
				return;
			}
			this.quantity = 1;
			if (type == 2) {
				this.showPopup = true;
			}
		},
		show() {
			if (this.showPopup) {
				this.showPopup = false;
			}
		},
		async getApClass(id) {
			const res = await main.getIdGood(id);
			console.log('re', res);
			this.goodsDetail = res.data;
			this.isNull = true;
			this.sort(0);
			this.swiperList = this.goodsDetail.goodImg.split(',');
			this.swiperList = this.swiperList.map((item) => {
				item = this.path + item;
				return item;
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.flex {
	display: flex;
}
.align-center {
	align-items: center;
}
.flex-center {
	justify-content: center;
}
.flex-between {
	justify-content: space-between;
}
.flex-column {
	flex-direction: column;
}
.tiem {
	background: red;
	border-radius: 30rpx 30rpx 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}
.left-pi {
	text {
		font-family: MiSans, MiSans;
		font-weight: 500;
		font-size: 30rpx;
		color: #f05a39;
		text-align: center;
		font-style: normal;
		text-transform: none;
		span {
			font-size: 23rpx;
		}
	}
}

.timeClass {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}
.popup-content {
	background-color: #fff;
	border-radius: 20rpx 20rpx 0 0;
	padding: 30rpx;

	// 关闭按钮样式
	.close-btn {
		position: absolute;
		top: 30rpx;
		right: 30rpx;
		font-size: 48rpx;
		color: #999;
	}

	// 商品信息区域
	.product-info {
		display: flex;
		margin-top: 20rpx;

		// 左侧商品图片
		.product-image {
			width: 260rpx;
			height: 210rpx;
			position: relative;
			margin-right: 20rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
		}

		// 右侧商品详情
		.product-details {
			flex: 1;

			// 商品标题
			.product-title {
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
			}

			// 商品库存
			.product-stock {
				font-size: 28rpx;
				color: #666;
				margin-bottom: 30rpx;
			}

			.quantity-btn {
				display: flex;
				align-items: center;

				// 数量选择器
				.quantity-selector {
					display: flex;
					align-items: center;
					margin-right: 20rpx;
					.minus-btn,
					.plus-btn {
						width: 60rpx;
						height: 60rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						border: 1px solid #ddd;
						font-size: 36rpx;
					}

					input {
						width: 80rpx;
						height: 58rpx;
						text-align: center;
						border-top: 1px solid #ddd;
						border-bottom: 1px solid #ddd;
					}
				}
				// 一键购买按钮
				.buy-all-btn {
					color: #ff6b35;
					font-size: 28rpx;
				}
			}
		}
	}

	// 底部结算栏
	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx 30rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;

		// 操作按钮
		.action-buttons {
			display: flex;
			justify-content: space-between;
			width: 40%;

			.cancel-btn {
				width: 132rpx;
				background-color: #f5f5f5;
				color: #333;
				border-radius: 50rpx;
				height: 56rpx;
				line-height: 56rpx;
			}

			.confirm-btn {
				margin-left: 20rpx;
				width: 232rpx;
				background-color: #ff6b35;
				color: #fff;
				border-radius: 50rpx;
				height: 56rpx;
				line-height: 56rpx;
			}
		}
	}
}
.time {
	position: relative;
	height: 210rpx;
	.purchase {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		background-color: #fff;
		padding: 30rpx;
		width: 686rpx;
		height: 210rpx;
		border-radius: 20rpx;
		position: absolute;
		top: -30rpx;
		left: 50%;
		transform: translateX(-50%);

		.purchase-top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.purchase-right {
				display: flex;
			}
		}

		.purchase-left {
			font-size: 26rpx;
			color: #777777;
			.left-bottom {
				margin-top: 10rpx;
				display: flex;
				align-items: center;
				text {
					color: #333333;
					display: block;
					margin-left: 20rpx;
				}
			}
		}
	}
}

.quotation {
	background-color: #fff;
	padding: 30rpx;
	margin: 0 30rpx 30rpx 30rpx;
	border-radius: 20rpx;
	.qu-name {
		font-weight: 550;
		font-size: 28rpx;
		color: #333333;
		margin-bottom: 20rpx;
	}
	.prices {
		display: flex;
		justify-content: space-between;
		.top-pri {
			margin-bottom: 10rpx;
		}
		.time-bottom {
			margin-top: 7rpx;
			height: 32rpx;
			background: #f7f7f7;
			border-radius: 96rpx 96rpx 96rpx 96rpx;
			font-size: 20rpx;
			color: #aaaaaa;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}

.shopping {
	margin: 0 30rpx;
	padding: 30rpx;
	height: 200rpx;
	background: url('@/static/goods_details/Frame1.png') no-repeat;
	background-size: 100% auto;

	.shopping-name {
		color: #662d08;
		font-size: 30rpx;
		font-weight: bold;
	}
	.shopping-bottom {
		display: flex;
		flex-wrap: wrap;
		view {
			width: 50%;
			text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #944914;
			}
			span {
				font-size: 24rpx;
				color: #572a0c;
			}
		}
	}
}

.items {
	display: flex;
	justify-content: space-between;
	margin: 20rpx 45rpx;
	.item {
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
	}
	.border-bottom {
		width: 30rpx;
		height: 8rpx;
		background: #f05a39;
		border-radius: 50rpx 50rpx 50rpx 50rpx;
	}
	.avater {
		font-weight: 550;
		font-size: 28rpx;
		color: #333333;
	}
}
.images-item {
	image {
		width: 100%;
	}
}
.item3 {
	margin: 20rpx 45rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;

	font-size: 24rpx;
	color: #333333;
}

.goods-details {
	padding-bottom: calc(120rpx + env(safe-area-inset-bottom));

	.details-null {
		padding-top: 140rpx;
		margin-bottom: 100rpx;
	}

	.footer {
		height: 100rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		box-sizing: content-box;
		padding-bottom: env(safe-area-inset-bottom);

		.btn {
			width: 100rpx;
			height: 100rpx;
			position: relative;
			line-height: 1.3;
		}

		.cart-num {
			position: absolute;
			left: 60rpx;
			top: 6rpx;
		}

		.add-cart,
		.right-buy {
			flex: 1;
			text-align: center;
			padding: 16rpx 0;
		}

		.add-cart {
			background-color: #ffa630;
		}

		.right-buy {
			background-color: $-color-primary;
		}
	}
}
</style>
